<template>
  <div class="photos">
    <sticky :top="0">
      <div class="nav">
        <div class="nav-left">
          <div class="item active">全部</div>
          <div class="photo-num">（{{photoThumbnailList.length}}张）</div>
        </div>
        <div class="nav-right">
          <span class="waterFall-icon"
            :class="{active: layoutCol2}"
            @click="layout = 'col2'"></span>
          <span class="tiled-icon"
            :class="{active: layoutCol4}"
            @click="layout = 'col4'"></span>
        </div>
      </div>
    </sticky>
    <div class="photo_block"
      :class="{
        col2: layoutCol2,
        col4: layoutCol4
      }">
      <div class="photo_item"
        v-for="(item,index) in photoThumbnailList"
        :key="index">
        <img class="img100"
          @click="showPreviewer(index)"
          v-lazy="item">
      </div>
    </div>
    <previewer :list="photoPreviewList"
      :options="photoSwipeOption"
      ref="previewer"></previewer>
  </div>
</template>

<script>
import sticky from '@/components/sticky'
import previewer from '@/components/previewer'
import {
  getImgList
} from '@/http'

export default {
  name: 'photos',
  components: {
    sticky,
    previewer
  },
  data() {
    return {
      layout: 'col2',
      photoThumbnailList: [],
      photoPreviewList: [],
      photoSwipeOption: {
        isClickableElement() {
          return true
        }
      }
    }
  },
  computed: {
    layoutCol2() {
      return this.layout === 'col2'
    },
    layoutCol4() {
      return this.layout === 'col4'
    }
  },
  methods: {
    async asyncData(e) {
      const res = await getImgList()
      // this.photoList = res
      if (res && res.length) {
        res.forEach((item, index) => {
          this.photoThumbnailList.push(item.thumbnail)
          this.photoPreviewList.push({
            src: item.big_img,
            w: 1620,
            h: 1080
          })
        })
      }
    },
    showPreviewer(index) {
      this.$refs.previewer.show(index)
    }
  },
  mounted() {
  },
  created() {
    this.asyncData()
  }
}
</script>

<style lang="scss" scoped>
.photos {
  // margin-top: 20px;
  margin-top: 0;
  .photos_title {
    font-weight: 400;
    margin: 0 14px;
  }
  .nav {
    padding: 0 14px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    background: #111;
    position: relative;
    .nav-left {
      display: flex;
      align-items: center;
      height: 100%;
      .item {
        font-size: 14px;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .item.active {
        color: #fff;
        font-weight: 700;
        border-bottom: 2px solid #fff;
      }
      .photo-num {
        color: #6b6d70;
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .nav-right {
      display: flex;
      align-items: center;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        background: #414141;
        height: 40%;
        width: 1px;
      }
      .waterFall-icon {
        width: 40px;
        height: 40px;
        background-size: 15px 15px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/two-icon.png);
        &.active {
          background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/two-active-icon.png);
        }
      }
      .tiled-icon {
        width: 40px;
        height: 40px;
        background-size: 15px 15px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/three-icon.png);
        &.active {
          background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/three-active-icon.png);
        }
      }
    }
  }
  .photo_block {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    .photo_item {
      overflow: hidden;
      img {
        height: 100%;
        object-fit: cover;
      }
    }
    &.col2 {
      .photo_item {
        width: 49vw;
        height: 33vw;
        margin-top: 2vw;
        margin-right: 2vw;
        &:nth-child(even) {
          margin-right: unset;
        }
      }
    }
    &.col4 {
      .photo_item {
        width: 24vw;
        height: 24vw;
        margin-top: 1.3333vw;
        margin-right: 1.3333vw;
        &:nth-child(4n) {
          margin-right: unset;
        }
      }
    }
  }
}
</style>
